<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/head::head">
</head>

<body>
<div class="layui-container">
    <form action="./updateMonitor" class="layui-form" id="form_monitor">
        <input name="id" type="hidden" th:value="${model?.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" th:value="${model?.name}"
                       placeholder="请输入监控名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开启状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭"
                       th:checked="${model?.status}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">自动重启</label>
            <div class="layui-input-block" title="尝试自动重启">
                <input type="checkbox" name="autoRestart" lay-skin="switch" lay-text="是|否"
                       th:checked="${model?.autoRestart}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">监控周期</label>
            <div class="layui-input-block">

                <input th:each="item : ${cycleArray}" type="radio" name="cycle" th:value="${item.code}"
                       th:title="${item.desc}"
                       th:checked="${model?.cycle==item.code}">
            </div>
        </div>

        <div class=" layui-form-item">
            <label class="layui-form-label">监控项目</label>
            <div class="layui-input-block">
                <div class="layui-collapse">
                    <div class="layui-colla-item" th:unless="${#lists.isEmpty(nodeModels)}"
                         th:each="item : ${nodeModels}">
                        <div class="layui-colla-title" th:text="${item.name}"></div>
                        <div class="layui-colla-content layui-show">
                            <th:block th:each="groupProject : ${item.groupProjects}">
                                <input th:each="project : ${groupProject.projects}" type="checkbox" name="projects"
                                       th:value="${project.id}" th:id="${item.id}+'_'+${project.id}"
                                       th:checked="${model?.checkNodeProject(item.id,project.id)}"
                                       lay-skin="primary" th:title="${project.name}" th:nodeId="${item.id}">
                            </th:block>
                        </div>
                    </div>

                    <div class="layui-colla-item" th:if="${#lists.isEmpty(nodeModels)}">
                        <div class="layui-colla-title">
                            没有可用节点
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报警联系人</label>
            <div class="layui-input-block" id="notifyUser">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item" style="padding-left: 20%;margin-top: 20px;">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitMonitor"
                        id="submitMonitor">
                    提交
                </button>
            </div>
        </div>
    </form>
</div>
</body>

<script type="text/javascript" th:inline="javascript">
    var userLists = [[${userLists}]];
    var transfer;

    var checkUser = [[${model?.notifyUser}]];

    function loadSuccess() {
        layui.use('transfer', function () {
            transfer = layui.transfer;
            //渲染
            transfer.render({
                elem: '#notifyUser',
                data: userLists,
                value: checkUser,
                title: ['待选择用户', '已选择用户'],
                id: 'notifyUser'
            });
        });

        // 提交信息
        form.on('submit(submitMonitor)', function (data) {
            var sendData = data.field;
            if (!sendData.cycle) {
                layer.msg("请选择监控周期");
                return false;
            }
            var projects = getCheckProjects(sendData);
            if (!projects || projects.length <= 0) {
                layer.msg("请至少选择一个项目");
                return false;
            }
            var notifyUser = transfer.getData('notifyUser');
            if (!notifyUser || notifyUser.length <= 0) {
                layer.msg("请至少选择一个通知人");
                return false;
            }
            var notifyUsers = [];
            for (var i = 0; i < notifyUser.length; i++) {
                notifyUsers.push(notifyUser[i].value);
            }
            sendData.notifyUser = JSON.stringify(notifyUsers);
            loadingAjax({
                url: data.form.action,
                data: sendData,
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 == data.code) {
                        autoClose();
                    }
                }
            });
            return false;
        });

        //获取监控选中的项目
        function getCheckProjects(data) {
            var projects = [];
            var checkedList = $("input[name='projects']");
            var len = checkedList.length;
            if (len <= 0) {
                return projects;
            }
            var node = {};
            for (var i = 0; i < len; i++) {
                var dom = checkedList[i];
                if (dom.checked) {
                    var value = dom.getAttribute("value");
                    if (!value) {
                        continue;
                    }
                    var nodeId = dom.getAttribute("nodeId");
                    var item = node[nodeId];
                    if (!item) {
                        item = [];
                    }
                    item.push(value);
                    node[nodeId] = item;
                }
            }
            for (var key in node) {
                projects.push({
                    node: key,
                    projects: node[key]
                })
            }
            data.projects = JSON.stringify(projects);
            return projects;
        }
    }
</script>
</html>
